【Angular】之 $q 实现 promise 源码解读(01)

全面解读 angular 的 $q 机制

@license AngularJS v1.4.8

该代码块基于源码进行了删减
该代码块仅用于学习 分享 交流
为了代码的清晰，修改了部分非核心代码，并且删除了所有的异常处理
以下为 angular $q 的核心代码

var $q = {};
var defer = function() { return new Deferred(); };

function Promise() {
    // 一共四种状态:
    // 0: 等待
    // 1: 通过
    // 2: 拒绝
    // -1: 处理 promise 对象
    this.$$state = { status: 0 };
}

extend(Promise.prototype, {
    // then 函数主要功能是 新创建 deferred 对象 并 往队列里面添加 回调函数
    then: function(onFulfilled, onRejected, progressBack) {
         // 没有任何回调直接返回
        if (!onFulfilled && !onRejected && !progressBack) return this;
        // 每执行一次 then 都会创建一个新的 Deferred 对象
        var result = new Deferred();
        this.$$state.pending = this.$$state.pending || [];
        // 往队列里面添加 回调函数
        this.$$state.pending.push([
            result, 
            onFulfilled, 
            onRejected, 
            progressBack
        ]);
        // 如果先执行了 状态方法 resolve 或 reject 再执行 then 时会直接执行对应的回调函数
        // 即异步变成了同步 依然不影响程序的正常执行
        if (this.$$state.status > 0) scheduleProcessQueue(this.$$state);
        // 最后返回 Promise 对象 实现链式编程
        return result.promise;
    },
    "catch": function(callback) {
        // 相当于直接 reject 的回调 返回一个 promise 对象
        return this.then(null, callback);
    },
    "finally": function(callback, progressBack) {
        // 通过与拒绝都会执行 返回一个 promise 对象
        return this.then(function(value) {
            return handleCallback(value, true, callback);
        }, function(error) {
            return handleCallback(error, false, callback);
        }, progressBack);
    }
});
// 绑定上下文
function simpleBind(context, fn) {
    return function(value) {
        fn.call(context, value);
    };
}

// $q 最核心的方法
// processQueue 用于执行回调函数
function processQueue(state) {
    var fn, deferred, pending;
    pending = state.pending;
    state.processScheduled = false;
    // 执行完毕之后 置空 队列里的所有回调函数
    state.pending = undefined;
    for (var i = 0, ii = pending.length; i < ii; ++i) {
        deferred = pending[i][0];
        // 巧妙的运用状态来控制回调函数
        fn = pending[i][state.status];
        if (isFunction(fn)) {
            // fn(state.value) 回调函数
            // 同时把回调函数的返回值传给 deferred.resolve()
            // 这样就可以实现返回值的链式传递 .then().then().then()
            // 第一个 then 是 最外层的 deferred 对象的 promise 对象的方法
            // 第二个 then 是 在第一个 then 内部重新创建的 deferred 的 promise 对象的方法 每个 then 都会返回一个 result.promise 对象
            // 也就是每执行调一次 then 方法就会嵌套一层 deferred 对象  (这个应该不是实现 promise 的最优解)
            // 前面 pending 已经置空了  就保证了 在 执行 deferred.resolve 时 只会把回调函数的返回值传过去而不会继续执行
            deferred.resolve(fn(state.value));
        } else if (state.status === 1) {
            deferred.resolve(state.value);
        } else {
            deferred.reject(state.value);
        }
    }
}

// 节流函数  阻止后续执行
function scheduleProcessQueue(state) {
    if (state.processScheduled || !state.pending) return;
    state.processScheduled = true;
    processQueue(state);
}
// Deferred 构造函数
function Deferred() {
    this.promise = new Promise();
    this.resolve = simpleBind(this, this.resolve);  // 实际上是调用的 原型的方法
    this.reject = simpleBind(this, this.reject);
    this.notify = simpleBind(this, this.notify);
}

extend(Deferred.prototype, {
    // 节流函数  有状态直接返回
    resolve: function(val) {
        if (this.promise.$$state.status) return;
        this.$$resolve(val);
    },
  // $$resolve 主要用于 改变状态 并 触发回调函数
    $$resolve: function(val) {
        var then, fns;
        // callOnce 绑定this 返回 [this.$$resolve, this.$$reject]
        // 这步操作应该放到下面
        fns = callOnce(this, this.$$resolve, this.$$reject);
        // 如果传过来的对象是 promise 对象
        // 则把状态变为 -1 同时 执行 promise.then 并且 传递 this.$$resolve, this.$$reject 回调
        // 这样就保证了对 传过来的 promise 对象的执行监听 同时也兼容了 原生 promise 对象
        if ((isObject(val) || isFunction(val))) then = val && val.then;
        if (isFunction(then)) {
            this.promise.$$state.status = -1;
            then.call(val, fns[0], fns[1], this.notify);
        } else {
            // 常规执行： 存储 val 值  更新状态 并 执行回调函数
            this.promise.$$state.value = val;
            this.promise.$$state.status = 1;
            scheduleProcessQueue(this.promise.$$state);
        }
    },
    reject: function(reason) {
        if (this.promise.$$state.status) return;
        this.$$reject(reason);
    },
    // 同 $$resolve 常规执行
    $$reject: function(reason) {
        this.promise.$$state.value = reason;
        this.promise.$$state.status = 2;
        scheduleProcessQueue(this.promise.$$state);
    },
    notify: function(progress) {
        var callbacks = this.promise.$$state.pending;
        if (
            (this.promise.$$state.status <= 0) && 
            callbacks && 
            callbacks.length
        ) {
            var callback, result;
            for (var i = 0, ii = callbacks.length; i < ii; i++) {
                result = callbacks[i][0];
                // 执行传递给 then 的第三个回调函数 并把值传递给该回调
                callback = callbacks[i][3];
                result.notify(
                    isFunction(callback) ? 
                    callback(progress) : 
                    progress
                );
            }
        }
    }
});

// 对外的静态方法 用于 拒绝 promise 的执行
// 当在一个 promise 通过时 返回一个 reject(...) 则会继续拒绝通过
// 下面这个例子中 第二个then 的回调函数不会执行 直接走到 catch 回调中
/* e.g: var deferred = $q.defer();setTimeout(function(){    deferred.resolve('SUCCESS');}, 1000);deferred.promise.then(function(r){    return $q.reject('ERROR');}).then(function(r){    console.log('success >>> ', r);}).catch(function(r){    console.log('error >>> ', r);});*/
var deferred = $q.defer();
setTimeout(function(){
    deferred.resolve('SUCCESS');
}, 1000);
deferred.promise.then(function(r){
    return $q.reject('ERROR');
}).then(function(r){
    console.log('success >>> ', r);
}).catch(function(r){
    console.log('error >>> ', r);
});
*/
var reject = function(reason) {
    var result = new Deferred();
    result.reject(reason);
    return result.promise;
};

// 同上 reject  执行 通过完成的回调
var resolve = function(value, callback, errback, progressBack) {
    var result = new Deferred();
    result.resolve(value);
    return result.promise.then(callback, errback, progressBack);
};

// 最有意思的是 all 方法
// 巧妙的通过 resolve 方法 将 新创建的 内部的 deferred 的 $$resolve 和 $$reject 传给 循环中 promise 的 then 作为回调
// all 方法 内创建的 deferred 对象 控制着全局
// 计数器控制着所有的成功之后 执行 deferred.resolve(results)
// 当有一个失败则执行 deferred.reject(reason)
function all(promises) {
    var deferred = new Deferred(),
        // 对每个 promise 添加计数器
        counter = 0,
        results = isArray(promises) ? [] : {};

    promises.forEach(function(promise, key) {
        counter++;
        resolve(promise).then(function(value) {
            if (results.hasOwnProperty(key)) return;
            results[key] = value;
            if (!(--counter)) deferred.resolve(results);
        }, function(reason) {
            if (results.hasOwnProperty(key)) return;
            deferred.reject(reason);
        });
    });

    // 如果 promises 为空 直接 通过
    if (counter === 0) {
        deferred.resolve(results);
    }

    return deferred.promise;
}

// 改变函数调用 this 指向
function callOnce(self, resolveFn, rejectFn) {
    var called = false;
    function wrap(fn) {
        return function(value) {
            if (called) return;
            called = true;
            fn.call(self, value);
        };
    }
    return [wrap(resolveFn), wrap(rejectFn)];
}

var makePromise = function makePromise(value, resolved) {
    var result = new Deferred();
    if (resolved) {
        result.resolve(value);
    } else {
        result.reject(value);
    }
    return result.promise;
};

var handleCallback = function handleCallback(value, isResolved, callback) {
    var callbackOutput = null;
    if (isFunction(callback)) callbackOutput = callback();
    if (isPromiseLike(callbackOutput)) {
        return callbackOutput.then(function() {
            return makePromise(value, isResolved);
        }, function(error) {
          return makePromise(error, false);
        });
    } else {
        return makePromise(value, isResolved);
    }
};


// 以下为 模拟方法
function isFunction(fn){ return typeof fn === 'function'; }
function isObject(obj){ return typeof obj === 'object'; }
function isArray(array){ return Array.isArray(array); }
function isPromiseLike(obj) { return obj && isFunction(obj.then); }
function extend(obj, _proto){
    Object.keys(_proto).forEach(function(key){
        obj[key] = _proto[key];
    });
}

$q.defer = defer;
$q.reject = reject;
$q.resolve = resolve;
$q.all = all;

// 每个 $q.defer()  实际 都会 new 一个 Deferred 对象
{  // Deferred 对象
    // 在 构造 Deferred 对象的同时会 new 一个 Promise 对象
    // 在 angular 看来只要有 then 方法的就是 Promise 对象
    promise: {  // Promise 对象
        // 每个 Promise 对象都有一个 $$state
        // 其中 status 记录 当前 Promise 对象的状态
            // 一共四种状态:  该状态同时也对应于 pending 中的回调函数
            // 0: 等待  初始状态
            // 1: 通过  对应于 pending 中的 onFulfilled 回调
            // 2: 拒绝  对应于 pending 中的 onRejected 回调
            // -1: 处理传递的 promise 对象  deferred.resolve(promise)
        // pending 会在 执行完 .then() 方法后动态添加上  用于存储： 成功、失败和 finally 的回调函数
        // value 用于存储 结果值 并传递给回调函数
        $$state: {
            status: 0,
            pending: [  // .then() 之后会添加回调函数
                [_deferred, onFulfilled, onRejected, progressBack]
            ],  
            value: undefined,  // deferred.resolve(value)
        },
        _proto_: {
            // then: Promise 对象的核心方法
            // 主要用于添加回调函数 和 执行回调(status > 0 时)
            then: f(){},
            catch: f(){},
            finally: f(){}
        }
    },
    resolve: f(){},
    reject: f(){},
    notify: f(){},
    _proto_: {
        resolve: f(){},
        $$resolve:f(){},
        reject: f(){},
        $$reject: f(){},
        notify: f(){}
    }
}